<!DOCTYPE html>
<html lang="en"  xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
        <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
        <!--bootstrap-->
        <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/popper.js/1.14.7/umd/popper.min.js"></script>
        <script src="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
        <!--bootstrap-table-->
        <link href="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.css" rel="stylesheet">
        <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table.min.js"></script>
        <!--bootstrap-table-lanuage-->
        <script src="https://cdn.bootcss.com/bootstrap-table/1.14.2/bootstrap-table-locale-all.min.js"></script>
</head>
<script>
    $(function(){
        initTable();
    });
    function initTable(){
        var url = "http://localhost:8088/road/getcountList";
        $('#table').bootstrapTable({
            method:'GET',
            dataType:'json',
            contentType: "application/x-www-form-urlencoded",
            cache: false,
            striped: true,                              //是否显示行间隔色
            // sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
            url:url,
            pagination:true,
            queryParams : function(params){
                return params
            },
            pageNumber:1,                       //初始化加载第一页，默认第一页
            pageSize: 5,                       //每页的记录行数（*）
            pageList: [5, 10, 15, 20],        //可供选择的每页的行数（*）
            columns: [
                {
                    field : 'id',
                    title : 'ID',
                    align : 'center',
                    valign : 'middle',
                    sortable : true

                },{
                    field : 'count',
                    title : '数量',
                    align : 'center',
                    valign : 'middle',
                    sortable : true
                },{
                    field : 'content',
                    title : '操作内容',
                    align : 'center',
                    valign : 'middle',
                    sortable : true ,
                    formatter : function (value, row, index){
                        var html = '<button type="button"  onclick="javascript:look(\'' + row.id + '\')" class="btn btn-primary"><span class="glyphicon glyphicon-pencil" aria- hidden="true" ></span >查看轨迹</button >\n'+
                            '<button type="button"  onclick="javascript:upload(\'' + row.id + '\')" class="btn btn-danger"><span class="glyphicon glyphicon-remove" aria- hidden="true" ></span >上报</button >\n';
                        return html;
                    }
                }]
        });
    }
</script>
<script src="http://pv.sohu.com/cityjson?ie=utf-8"></script>
<script src="https://cdn.bootcss.com/crypto-js/4.0.0/crypto-js.min.js"></script>
<!--<script src="https://www.npmjs.com/package/aes-js"></script>-->
<!--<script src="{:ADDON_PUBLIC_PATH}/js/aes.js"></script>-->
<!--<script src="{:ADDON_PUBLIC_PATH}/js/pad-zeropadding-min.js"></script>-->
<script>
    function encrypt(data) {
        var key  = CryptoJS.enc.Latin1.parse('dufy20170329java');
        var iv   = CryptoJS.enc.Latin1.parse('dufy20170329java');
        return CryptoJS.AES.encrypt(data, key, {iv:iv,mode:CryptoJS.mode.CBC,padding:CryptoJS.pad.ZeroPadding}).toString();
    }
    function look(id){
        var getPoint = encrypt("getPoint");
        var ids =  encrypt(id);
        // alert(ids)
        location = "http://localhost:8088/road/getPoint?id="+ids;
    }

    function upload(id){
        var getRoadId = encrypt("getRoadId");
        var ids = encrypt(id);
        location = "http://localhost:8088/road/getroad?id="+id;
        // $.ajax({
        //     url : 'http://localhost:8088/roadclient/getroad?appKey=getRoadId?id='+id,
        //     data : "",
        //     type : "GET",
        //     success : function(data) {
        //         alert(data);
        //         alert("成功");
        //     }
        // });
    }
</script>
<body>
<div class="container">
        <table id="table"></table>
</div>
</body>
</html>